<template>
  <div class="mask">
    <div class="tankuang">
      <div class="l1">新增白名单</div>
      <el-form label-width="120px">
        <div class="ss">
          <el-form-item label="人员姓名" :rules="[{ required: true }]">
            <el-input
              class="s-1"
              v-model="forms.name"
              placeholder="请输入人员姓名"
            />
          </el-form-item>
          <el-form-item label="身份证号码">
            <el-input
              class="s-1"
              v-model="forms.idNumber"
              placeholder="请输入身份证号码"
            />
          </el-form-item>
        </div>
        <div class="ss">
          <el-form-item label="联系电话" :rules="[{ required: true }]">
            <el-input
              class="s-1"
              v-model="forms.phone"
              placeholder="请输入联系电话"
            />
          </el-form-item>
          <el-form-item label="性别">
            <el-select placeholder="--请选择--" v-model="forms.sex">
              <el-option
                :key="item"
                v-for="item in list6"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
        </div>
        <el-form-item
          v-model="forms.item"
          label="适用项目"
          :rules="[{ required: true }]"
          class="teshu"
        >
          <el-select placeholder="--请选择--">
            <el-option
              v-for="item in list1"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <div class="ss">
          <el-form-item label="有效起始">
            <el-input class="s-1" placeholder="请输入有效起始" />
          </el-form-item>
          <el-form-item label="有效结束">
            <el-input class="s-1" placeholder="请输入有效结束" />
          </el-form-item>
        </div>
        <el-form-item label="人脸采集" class="teshu">
          <div class="tu"><img src="" alt="" /></div>
          <div class="zi">
            1.请上传或采集正面免冠照，人脸无遮挡(可佩带眼镜)。
            2.图片文件支持jpg格式。
          </div>
        </el-form-item>
        <hr />
        <button @click="getperson">保存</button>
        <button @click="xiaoshi3">取消</button>
      </el-form>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { defineComponent, ref, defineEmits, reactive, watch } from "vue";
import service from "../../../utils/service";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import "element-plus/dist/index.css";
const $router = useRouter();
const emit = defineEmits<{
  (e: "aaa"): void;
  (e: "asd"): void;
}>();
function xiaoshi3() {
  emit("aaa");
}
const list6 = reactive(["男", "女"]);
const list1 = reactive(["XXX项目1", "XXX项目2", "XXX项目3"]);
interface whiteblackList {
  name: string;
  phone: string;
  item: string;
  idNumber: string;
  sex: string;
  time: string;
}
const forms = reactive<whiteblackList>({
  name: "",
  phone: "",
  item: "",
  idNumber: "",
  sex: "",
  time: "",
});

const getperson = () => {
  if (forms.name && forms.phone && forms.idNumber) {
    service({
      url: "/flower",
      method: "post",
      data: forms,
    }).then((res) => {
      ElMessage({
        message: "添加成功！",
        type: "success",
      });
      emit("aaa");
      emit("asd");
      $router.push("/mpage/blackWhite");
    });
  } else {
    ElMessage({
      message: "请填写完必填项目哦！",
      type: "warning",
    });
  }
};
</script>

<style scoped>
.mask {
  /* 遮罩层的写法 */
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}
.tankuang {
  width: 700px;
  height: 550px;
  background-color: rgb(235, 238, 238);
  position: fixed;
  top: 150px;
  left: 400px;
  z-index: 100;
  overflow: auto;
}
.l1 {
  width: 100px;
  height: 30px;
  border-left: 3px solid green;
  margin-left: 30px;
  font-size: 16px;
  margin: 10px 30px;
  font-weight: bold;
}
.s-1 {
  width: 200px;
}
.ss {
  display: flex;
  justify-content: center;
}
.teshu {
  margin-left: 30px;
}
.tu {
  width: 150px;
  height: 180px;
  border: 1px solid #bebcbc;
}
.zi {
  width: 320px;
  height: 30px;
  position: fixed;
  top: 520px;
  left: 750px;
}
button {
  width: 100px;
  height: 40px;
  background-color: rgb(211, 208, 208);
  border-radius: 10px;
  border: none;
  float: right;
  margin: 20px 10px 10px;
}
</style>